<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更新/添加目的地</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/css/oksub.css">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
	<div class="ok-body">
		<!--form表单-->
		<!--注意那些隐藏域input框，因为外键一般是它所属表的id字段，而页面上显示的一般是外键所属表的name字段，所以需要隐藏域保存id，给后台传值，方便新增和编辑-->
		<form class="layui-form layui-form-pane ok-form" lay-filter="filter">
		
			<div class="layui-form-item">
				<label class="layui-form-label">网点名称</label>
				<div class="layui-input-block">
					<input type="text" name="networkName" placeholder="请输入网点名称" id="network_name"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<input type="hidden" name="networkId" autocomplete="off">
			
			<div class="layui-form-item">
				<label class="layui-form-label">所属网点</label>
				<div class="layui-input-block">
					<input type="text" name="parentNetworkName" id="context"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<input type="hidden" name="parentNetworkId" autocomplete="off">

			<div class="layui-form-item">
				<label class="layui-form-label">财务中心</label>
				<div class="layui-input-block">
					<input type="text" name="financeCenter" placeholder="请输入所属财务中心" id="finance_center"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">负责员工姓名</label>
				<div class="layui-input-block">
					<input type="text" name="principalName" placeholder="请输入负责员工姓名" id="principal_name"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-block">
					<input type="text" name="phone" placeholder="请输入手机" id="phone"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">座机电话</label>
				<div class="layui-input-block">
					<input type="text" name="telphone" placeholder="请输入座机电话" id="telphone"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">财务中心标识</label>
				<div class="layui-input-block">
					<input type="text" name="financeCenterSign" placeholder="请输入财务中心标识" id="finance_center_sign"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">分拨中心标识</label>
				<div class="layui-input-block">
					<input type="text" name="distributionCenterSign" placeholder="请输入分拨中心标识" id="distribution_center_sign"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<input type="text" name="type" placeholder="请输入类型" id="type"
						autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>


			<div class="layui-form-item" id="area-picker">
				<div class="layui-form-label">网点地址</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="province" class="province-selector" lay-filter="province" lay-verify="required" lay-search="true">
						<option value="">请选择省</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="city" class="city-selector" lay-filter="city" lay-verify="required" lay-search="true">
						<option value="">请选择市</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="area" class="county-selector" lay-filter="area" lay-verify="required" lay-search="true">
						<option value="">请选择区</option>
					</select>
				</div>
			</div>


	
			<div class="layui-form-item">
				<label class="layui-form-label">详细地址</label>
					<div class="layui-input-block">
						<input class="layui-input" id="address" lay-verify="required"
						placeholder="请输入详细地址" name="address"/>
					</div>
			</div>

			<input type="hidden" name="address_id" autocomplete="off">

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="remark" placeholder="请输入内容" id="remark" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

		</form>
	</div>
	
	<!--js逻辑-->
	<script src="/lib/layui/layui.js"></script>
	<script>
		var initData;
	
		//设置标签，判断初始值是否已经赋值过了
		var isshow = false;
	
		function initForm(data) {
			var jsonString = JSON.stringify(data);

			initData = JSON.parse(jsonString);

			// console.info("1--->"+initData.data);
			//console.info("1--->"+initData)由该语句和下面的输出语句可知，initForm方法和layui.use有执行先后顺序问题
			//！isshow为true时，证明该方法先执行，在该方法内赋初始值
			if (!isshow) {
				initView(initData);
			}

		}

		//配置插件目录
		layui.config({
			base: '/lib/mods/'
			, version: '1.0'
		});
		//一般直接写在一个js文件中
		layui.use(['layer', 'form', 'layarea'], function () {
			var layer = layui.layer
					, form = layui.form
					, layarea = layui.layarea;

			layarea.render({
				elem: '#area-picker',
				change: function (res) {
					//选择结果
					console.log(res);
				}
			});
		});


		function initView(initData) {
			console.log(initData);
			//赋初始值，注意隐藏域也要赋值
			layui.use(["jquery"], function () {
			var $ = layui.jquery;
			// 把所属网点赋值到input隐藏框中
			$("input[name='parentNetworkId']").val(initData.nodeId);
			$("input[name='parentNetworkName']").val(initData.context);
			$("input[name='parentNetworkName']").attr('disabled','disabled');
			// 将网点的等级降级（先将level从String转换整数再加1）
			var mylevel = Number(initData.level) +1;
			$("input[name='type']").val(mylevel);
			$("input[name='type']").attr('disabled','disabled');


			});

			//将isshow重置为true，说明初始值已经赋值过了
			isshow = true;

		}

		layui.use(["element", "form", "laydate", "okLayer", "okUtils","jquery"], function () {
			var form = layui.form;
			var laydate = layui.laydate;
			var okLayer = layui.okLayer;
			var okUtils = layui.okUtils;
			var $ = layui.jquery;
			okLoading.close();

			//console.info("2--->"+initData)
			//！isshow为true时，并且initData!=null&&initData!=undefined时，证明该方法先执行，在该方法内赋初始值
			if (!isshow && initData!=null&&initData!=undefined) {
				initView(initData);
			}


				form.on("submit(add)", function (data) {
					console.info(data.field);
					okUtils.ajax("/api/network/add", "post", data.field, true).done(function (response) {
						console.log(response);
						okLayer.greenTickMsg("操作成功", function () {
							// 刷新父页面  window.parent.opener.location.reload();

							parent.layer.close(parent.layer.getFrameIndex(window.name));
						});
					}).fail(function (error) {
						console.log(error)
					});
					return false;
				});

		});
	</script>
</body>
</html>
